<html>
<head>
	<!--
		This file is a demo of the FlickrStore, a simple wrapper to the public
		feed service of Flickr. This just does very basic queries against
		Flickr and loads the results into a list viewing widget.
	-->
	<title>Demo of FlickrStore</title>
	<style type="text/css">
		@import "../../../dijit/themes/tundra/tundra.css";
		@import "../../../dojo/resources/dojo.css";
		@import "../../../dijit/tests/css/dijitTests.css";
	</style>

	<script type="text/javascript" src="../../../dojo/dojo.js" 
		djConfig="isDebug: true, parseOnLoad: true"></script>
	<script type="text/javascript">
		dojo.require("dojo.parser");
		dojo.require("dijit.form.TextBox");
		dojo.require("dijit.form.Button");
		dojo.require("dijit.form.ComboBox");
		dojo.require("dijit.form.NumberSpinner");
		dojo.require("dojox.data.FlickrStore");
		dojo.require("dojox.data.demos.widgets.FlickrViewList");

		function init(){
			//Function to invoke the search of the FlickrStore
			var invokeSearch = function(){
				var request = { query: {} };
				
				if(idWidget){
					var id = idWidget.getValue() || "";
					if(id && id.length){
						request.query.userid = id;
					}
				}
                
				if(tagsWidget){
					request.query.tags = (tagsWidget.getValue()||"").split(" ").join(",");
				}

				
				if(tagmodeWidget){
					request.query.tagmode = tagmodeWidget.getValue()||"";
				}

				if(countWidget){
					request.count = countWidget.getValue();
				}
				flickrViewsWidget.fetch(request);
			}
			
			dojo.connect(flickrViewsWidget, "fetch", function() {
				statusWidget.setValue("PROCESSING REQUEST");
			});
			
			dojo.connect(flickrViewsWidget, "onComplete", function() {
                statusWidget.setValue("PROCESSING COMPLETE.");
			});

			dojo.connect(flickrViewsWidget, "onError", function() {
                statusWidget.setValue("ERROR!");
			});

			//Lastly, link up the search event.
			var button = dijit.byId("searchButton");
			dojo.connect(button, "onClick", invokeSearch);
		}
		dojo.addOnLoad(init);
		dojo.addOnLoad(function(){ dijit.byId("searchButton").onClick(); });
	</script>
</head>

<body class="tundra">
	<h1>
		DEMO:  FlickrStore Search
	</h1>
	<p>
		This simple demo shows how services, such as Flickr, can be wrapped by
		the datastore API. In this demo, you can search public Flickr images
		through a simple FlickrStore by specifying a series of tags (separated
		by spaces) to search on.  The results will be displayed below the
		search box.
	</p>
	<table>
		<tbody>
			<tr>
				<td>
					<b>Status:</b>
				</td>
				<td>
					<div dojoType="dijit.form.TextBox" size="50" id="status" jsId="statusWidget" disabled="true"></div>
				</td>
			</tr>
			<tr>
				<td>
					<b>ID:</b>
				</td>
				<td>
					<div dojoType="dijit.form.TextBox" size="50" id="userid" jsId="idWidget"></div>
				</td>
			</tr>
			<tr>
				<td>
					<b>Tags:</b>
				</td>
				<td>
					<div dojoType="dijit.form.TextBox" size="50" id="tags" jsId="tagsWidget" value="nature"></div>
				</td>
			</tr>
			<tr>
				<td>
					<b>Tagmode:</b>
				</td>
				<td>
					<select id="tagmode"
							jsId="tagmodeWidget"
							dojoType="dijit.form.ComboBox"
							autocomplete="false"
							value="any"
					>
						<option>any</option>
						<option>all</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>
					<b>Number of Pictures:</b>
				</td>
				<td>
					<div   
						id="count"
						jsId="countWidget"
						dojoType="dijit.form.NumberSpinner"
						value="20"
						constraints="{min:1,max:20,places:0}" 
					></div>
				</td>
			</tr>
			<tr>
				<td>
				</td>
				<td>
					<div dojoType="dijit.form.Button" label="Search" 
						id="searchButton" jsId="searchButtonWidget"></div>
				</td>
			</tr>
		</tbody>
	</table>
	<!--
		The store instance used by this demo.
	-->
	<div dojoType="dojox.data.FlickrStore" jsId="flickrStore" label="title"></div>
	<div dojoType="dojox.data.demos.widgets.FlickrViewList" 
		store="flickrStore"
		id="flickrViews" 
		jsId="flickrViewsWidget"></div>

</body>
</html>
